<template>
    <div id="ClassExpenseVariationContainer">
        <div id="headTitle">班费变化</div>
        <div id="tablehead">
            <el-input id="searchTextInput" v-model="searchUser" placeholder="请输入搜索的用户"/>
            <el-button type="primary" @click="loadData">搜索</el-button>
            <div id="classExpense">当前班费余额：{{classExpense}}元</div>
        </div>
        <div id="table">
            <el-table max-height="700" :data="classExpenseVariations" border>
                <el-table-column prop="userName" label="用户" show-overflow-tooltip align="center" width="100"/>
                <el-table-column prop="time" label="时间" show-overflow-tooltip align="center"/>
                <el-table-column prop="classExpense" label="申请/缴费前班费余额" show-overflow-tooltip align="center" width="200"/>
                <el-table-column label="申请/缴费金额" width="150" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <span v-if="scope.row.amount>0" style="color:#67c23a">+{{ scope.row.amount }}</span>
                        <span v-if="scope.row.amount<0" style="color:#f56c6c">{{ scope.row.amount }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="pageNumber"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="variationTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
//css
import "../assets/ClassExpenseVariation.css";
//请求
import request from '@/utils/requset.js';
//顶部提示信息
import prompt from '@/utils/prompt.js'
//路由跳转
import router from "@/router";

export default {
    name: 'classInfo',
    data() {
        return {
            //缴费项目数据
            classExpenseVariations: [],
            pageNumber: 1,
            pageSize: 5,
            variationTotal: 0,
            searchUser: "",
            classExpense: 0,
            //要删除的缴费项目
            delete: {},
            formVisible: false,
        }
    },
    created() {
        if (this.isIntoClass()) {
            this.loadData();
        }
    },
    methods: {
        //是否加入班级
        isIntoClass() {
            let classID = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).classID : 0;
            if (classID < 1) {
                prompt("还未加入班级！", "error");
                router.push({path: "home"});
                return false;
            }
            return true;
        },
        //加载缴费项目信息
        loadData() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "/login"});
                return;
            }
            request.get("/classExpense/info", {
                params: {
                    token: token,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    searchUser: this.searchUser
                }
            }).then(result => {
                //请求失败
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                }
                //请求成功
                this.classExpenseVariations = result.data.classExpenseVariations;
                this.variationTotal = result.data.variationTotal;
                this.classExpense = result.data.classExpense;
            })
        },
        //分页-单页数量
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadData();
        },
        //分页-页码
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.loadData();
        },
    }
}
</script>